// 客户管理
import { useState, useEffect } from 'react'
import '../../assets/css/clientMange.css'
import {
  Button,
  Input,
  Checkbox,
  Divider,
  Table,
  Modal,
  Select,
  Upload,
  message,
  DatePicker,
} from 'antd'

import {
  UpOutlined,
  DownOutlined,
  CloseCircleOutlined,
  FormOutlined,
  RightOutlined,
  PlusOutlined,
  DeleteOutlined,
} from '@ant-design/icons'
import {
  getClientList,
  getLeaseList,
  getZuqiList,
  getBaoxiuList,
  getChangeZuqi,
  addClient,
  delClient,
  changeBasic,
  updateUser,
  upeUser,
  delZuqi,
  addZuqi
} from '../../api/clientMange'
export default function ClientMange() {
  let qzqStatus = [
    {
      label: '有未开始的租期',
      value: '有未开始的租期',
    },
    {
      label: '租期进行中',
      value: '租期进行中',
    },
    {
      label: '有已结束的租期',
      value: '有已结束的租期',
    },
  ]
  // 修改筛选显示状态
  let [isFilte, setIsFilte] = useState(false)
  // 改变租期状态
  const changeZqStatus = (e) => {
    console.log(e);
  }
  // 开关编辑模态框
  let [mod, setMod] = useState(false)
  // 记录用户选择是什么
  let [useId, setUseID] = useState('')
  // 记录用户选择是什么
  let [sel, setSel] = useState('')
  // 记录企业发票抬头
  let [invoice, setInvoice] = useState('')
  // 记录个人发票抬头
  let [useinvoice, setUseInvoice] = useState('')
  // 记录税收
  let [taxation, setTaxation] = useState('')
  // 记录单位地址
  let [unit, setUnit] = useState('')

  // 记录用户手机号
  let [userPhone, setUserPhone] = useState('')
  // 记录开户行
  let [bank, setBank] = useState('')
  // 记录银行卡号
  let [bankCard, setBankCard] = useState('')
  const changeClientDetail = (row) => {
    console.log(row);
    setClientDetail(row)
    setShowDetail(true)
    setSel(row.clientType)
    setInvoice(row.clientName)
    setTaxation("91110" + " " + "10000" + " " + "00000" + " " + "000")
    setUnit(row.liveBuild)
    setUserPhone(row.phone)
    setBank('北京市海淀区')
    setBankCard("1234" + ' ' + '2222' + ' ' + '4567' + ' ' + '890')
    setUseInvoice(row.name)
    setUseID(row.id)
  }
  // 表格列信息
  let columns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      key: 'clientName',
      align: 'center',
      render: (clientName, row) => <span onClick={() => {
        changeClientDetail(row)
      }}>{clientName}</span>,
    },
    {
      title: '有未开始的租期',
      dataIndex: 'noStart',
      key: 'noStart',
      align: 'center'
    },
    {
      title: '租期进行中',
      dataIndex: 'starting',
      key: 'starting',
      align: 'center'
    },
    {
      title: '有已结束的租期',
      dataIndex: 'finished',
      key: 'finished',
      align: 'center'
    },
    {
      title: '曾驻最大面积(m²)',
      dataIndex: 'maxarea',
      key: 'maxarea',
      align: 'center'
    },
    {
      title: '已驻天数(天)',
      dataIndex: 'lived',
      key: 'lived',
      align: 'center'
    },
    {
      title: '待驻天数(天)',
      dataIndex: 'live',
      key: 'live',
      align: 'center'
    },
  ]
  // 租约表格列信息
  let leasecolumns = [
    {
      title: '租约编号',
      dataIndex: 'leaseId',
      key: 'leaseId',
      align: 'center'
    },
    {
      title: '租约类型',
      dataIndex: 'leaseType',
      key: 'leaseType',
      align: 'center'
    },
    {
      title: '租赁空间',
      dataIndex: 'space',
      key: 'space',
      align: 'center'
    },
    {
      title: '租期',
      dataIndex: 'leaseDate',
      key: 'leaseDate',
      align: 'center'
    },
    {
      title: '租约状态',
      dataIndex: 'leaseStatus',
      key: 'leaseStatus',
      align: 'center',
      render: (item) => {
        return (<span style={{
          whiteSpace: 'nowrap',
          fontSize: 14,
          color: item == '未开始' ? '#000' : item == '执行中' ? '#75C476' : item == '已完成' ? '#F97171' : '#BDC5D5'
        }}>{item}</span>)
      }
    },
    {
      title: '招商负责人',
      dataIndex: 'fuzeren',
      key: 'fuzeren',
      align: 'center'
    },
  ]
  // 租期表格列信息
  let zuqicolumns = [
    {
      title: '楼宇',
      dataIndex: 'build',
      key: 'build',
      align: 'center'
    },
    {
      title: '楼层',
      dataIndex: 'floor',
      key: 'floor',
      align: 'center'
    },
    {
      title: '租住空间',
      dataIndex: 'space',
      key: 'space',
      align: 'center'
    },
    {
      title: '租期开始日',
      dataIndex: 'startDate',
      key: 'startDate',
      align: 'center'
    },
    {
      title: '租期结束日',
      dataIndex: 'endDate',
      key: 'endDate',
      align: 'center'
    },
    {
      title: '租期状态',
      dataIndex: 'livestatus',
      key: 'livestatus',
      align: 'center',
      render: (item) => {
        return (<span style={{
          whiteSpace: 'nowrap',
          fontSize: 14,
          color: item == '租期未开始' ? '#000' : item == '租期中' ? '#75C476' : '#F97171'
        }}>{item}</span>)
      }
    }
  ]

  // 报修表格列信息
  let repaircolumns = [
    {
      title: '报修人',
      dataIndex: 'name',
      key: 'name',
      align: 'center'
    },
    {
      title: '报修人手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center'
    },
    {
      title: '报修位置',
      dataIndex: 'location',
      key: 'location',
      align: 'center'
    },
    {
      title: '报修类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center'
    },
    {
      title: '备注',
      dataIndex: 'question',
      key: 'question',
      align: 'center'
    },
    {
      title: '维修师傅',
      dataIndex: 'receiver',
      key: 'receiver',
      align: 'center'
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (item) => {
        return (<span style={{
          whiteSpace: 'nowrap',
          fontSize: 14,
          color: item == '待受理' ? '#000' : item == '解决中' ? '#75C476' : item == '待解决' ? '#FFB949' : '#F9717'
        }}>{item}</span>)
      }
    },
  ]
  // 租期变动明细
  let changeZuqicolumns = [
    {
      title: '租住类型',
      dataIndex: 'liveType',
      key: 'liveType',
      align: 'center',
      width: 50
    },
    {
      title: '所在楼宇',
      dataIndex: 'liveBuild',
      key: 'liveBuild',
      align: 'center'
    },
    {
      title: '所在楼层',
      dataIndex: 'livefloor',
      key: 'livefloor',
      align: 'center'
    },
    {
      title: '所在空间',
      dataIndex: 'liveSpace',
      key: 'liveSpace',
      align: 'center',
      render: (item) => {
        return (
          <span style={{
            color: '#8E86EA '
          }}>{item}</span>
        )
      }
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
      align: 'center',
      width: 50,
      textWrap: 'word-break',
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',
      align: 'center',
      width: 50,
      textWrap: 'word-break',
    },
    {
      title: '数据来源',
      dataIndex: 'source',
      key: 'source',
      width: 50,
      align: 'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      width: 50,
      textWrap: 'word-break',
    },
    {
      title: '操作',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (item, row) => {
        return (
          <>
            <FormOutlined style={{
              color: '#8876EA',
              fontSize: 14,
              marginRight: 10
            }} />
            <DeleteOutlined style={{
              color: '#F97171',
              fontSize: 14
            }} onClick={() => {
              delZuqi(row.id)
              getChangeZuqi().then(res => {
                setChangeZuqiData(res.data.data)
              })
            }} />
          </>
        )
      }
    },
  ]

  // 租期变动明细
  let [changeZuqiData, setChangeZuqiData] = useState([])
  // 报修信息
  let [repairData, setRepairData] = useState([])
  // 租期信息
  let [zuqiData, setZuqiData] = useState([])
  // 租约信息
  let [leaseData, setLeaseData] = useState([])
  // 客户信息
  let [clientData, setClientData] = useState([])
  // 新建客户信息
  // 客户名称
  let [clientName, setClientName] = useState("")
  // 客户类型
  let [clientType, setClientType] = useState("个人")
  // 客户行业
  let [clientIndustry, setClientIndustry] = useState("软件工程")
  // 规模
  let [peopleScale, setPeopleScale] = useState("5-10人")
  // 联系人姓名
  let [name, setName] = useState("")
  // 联系人职务
  let [post, setPost] = useState("")
  // 联系人手机号
  let [phone, setPhone] = useState("")
  // 联系人邮箱
  let [email, setEmail] = useState("")
  // 管理员姓名
  let [adminname, setAdminName] = useState("")
  // 管理员证件号
  let [adminIdcard, setAdminIdcard] = useState("")
  // 管理员手机号
  let [adminphone, setAdminPhone] = useState("")
  // 管理员邮箱
  let [adminemail, setAdminEmail] = useState("")

  // 客户详情
  let [clientDetail, setClientDetail] = useState({})
  // 客户详情input框的disabled
  let [clientNameipt, setClientNameipt] = useState(true)
  // tab栏数据
  const tabitems = [
    {
      key: '1',
      label: '客户资料',
    },
    {
      key: '2',
      label: '租约',
    },
    {
      key: '3',
      label: '租期',
    },
    {
      key: '4',
      label: '账单',
    },
    {
      key: '5',
      label: '报修',
    },
    {
      key: '6',
      label: '访客',
    },
  ];
  let [currtab, setCurrtab] = useState(1)


  // 是否打开新建客户模态框
  let [isnewOpen, setIsnewOpen] = useState(false)
  // 是否打开批量导入
  let [isimportOpen, setIsimportOpen] = useState(false)
  // 是否显示客户详情
  let [showDetail, setShowDetail] = useState(false)
  // 是否显示新租
  let [isXinzu, setIsXinzu] = useState(false)
  // 是否显示租期变动明细
  let [isZuqi, setIsZuqi] = useState(false)
  // 是否显示编辑基础资料
  let [editBasic, setEditBasic] = useState(false)
  useEffect(() => {
    getClientList().then((res) => {
      console.log(res);
      setClientData(res.data.data)
    })
    getZuqiList().then(res => {
      setZuqiData(res.data.data)
    })
    getBaoxiuList().then(res => {
      setRepairData(res.data.data)
    })

  }, [])
  // 上传的图片地址
  const [imageUrl, setImageUrl] = useState();
  const [loading, setLoading] = useState(false);
  // 上传前
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  // 图片编码
  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  // 上传后
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  // 上传按钮
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      <img src={new URL('../../assets/images/form.png', import.meta.url).href} alt="" />
    </button>
  );
  // 新租数据
  let [livebuild, setLivebuild] = useState("")
  let [livefloor, setLivefloor] = useState("")
  let [space, setSpace] = useState("")
  let [startDate, setStartDate] = useState({
    startDate: '',
    endDate: ""
  })
  function EmptyStatus() {
    return (
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20
      }}>
        <img
          src={new URL('../../assets/images/weitu.png', import.meta.url).href}
          style={{
            width: 290,
            height: 190
          }}
          alt="" />
        <p style={{
          fontSize: 16,
          color: '#000'
        }}>即将上线~</p>
      </div>
    )
  }


  return (
    <div className='qclientMange'>
      <div className="qtopMenu">
        <Button className='qnewClient' onClick={() => {
          setIsnewOpen(true)
        }}>新建客户</Button>
        <span className='qbulk' onClick={() => {
          setIsimportOpen(true)
        }}>批量导入</span>
      </div>
      {/* 筛选 */}
      <div className="qfilte">
        <Input placeholder='请输入客户名称' className='qclientName'></Input>
        <div style={isFilte ? { display: 'none' } : {}}>
          {/* 租期状态 */}
          <div className="qzqStatus">
            <div className="qtitle">
              租期状态
            </div>
            <Checkbox.Group
              options={qzqStatus}

              onChange={(e) => { changeZqStatus(e) }}
            />
          </div>
          {/* 曾驻最大面积 */}
          <div className="qmaxArea">
            <div className="qtitle">
              曾驻最大面积
            </div>
            <Input classNames="qipt"
              style={{
                width: 120,
                height: 28
              }}></Input>m²~<Input classNames="qipt"
                style={{
                  width: 120,
                  height: 28
                }}></Input>m²
          </div>
          {/* 已驻天数 */}
          <div className="qlivedays">
            <div className="qtitle">
              已驻天数
            </div>
            <Input classNames="qipt"
              style={{
                width: 120,
                height: 28
              }}></Input>天~<Input classNames="qipt"
                style={{
                  width: 120,
                  height: 28
                }}></Input>天
          </div>
          {/* 待驻天数 */}
          <div className="qliveddays">
            <div className="qtitle">
              待驻天数
            </div>
            <Input classNames="qipt"
              style={{
                width: 120,
                height: 28
              }}></Input>天~<Input classNames="qipt"
                style={{
                  width: 120,
                  height: 28
                }}></Input>天
          </div>
        </div>
        {/* 收起筛选 */}
        <Divider
          style={{
            borderColor: '#ECEFF3',
          }}
        >
          <div className="qfilteBtn" onClick={() => {
            setIsFilte(!isFilte)
          }}>
            {isFilte ? <DownOutlined style={{
              marginRight: 10
            }} /> : <UpOutlined color='#8479e3' style={{
              marginRight: 10
            }} />}

            {isFilte ? '更多筛选' : '收起筛选'}
          </div>
        </Divider>
        <div className="qfilteBtns">
          <Button type='primary' style={{
            width: 96,
            height: 32,
            background: '#8479E3',
            marginRight: 20
          }}>查询</Button>
          <Button type='primary' style={{
            width: 96,
            heigh: 32,
            background: '#f0f1f9',
            color: '#999CB2'
          }}> 重置</Button>
        </div>
      </div>
      <div className="qtable">
        <Table
          columns={columns}
          dataSource={clientData}
        />
      </div>
      {/* 新建客户 */}
      <Modal
        title="新建客户"
        open={isnewOpen}
        onCancel={() => setIsnewOpen(false)}
        footer={null}
        width={480}
      >
        <div className='newClient' style={{
          paddingTop: 30,
          borderTop: '1px solid #DBDEE3',
          height: 443,
          overflow: 'scroll'
        }}>
          <h5>客户信息</h5>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
          }}>
            <div className="clientName clientINfoItem">
              <p className="require qtitle">客户名称</p>
              <Input value={clientName} onChange={(e) => {
                setClientName(e.target.value)


              }}
                placeholder='请输入'
              ></Input>
            </div>
            <div className="clientType clientINfoItem">
              <p className="require qtitle">客户类型</p>
              <Select
                defaultValue={clientType}
                style={{
                  width: 206,
                  height: 36,
                  marginTop: 11
                }}
                onChange={(e) => setClientType(e)}
                options={[
                  {
                    value: '企业',
                    label: '企业',
                  },
                  {
                    value: '个人',
                    label: '个人',
                  },

                ]}
              />
            </div>
            {/* 行业 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">行业</p>
              <Select
                defaultValue={clientIndustry}
                style={{
                  width: 206,
                  height: 36,
                  marginTop: 11
                }}
                onChange={(e) => setClientIndustry(e)}
                options={[
                  {
                    value: '软件工程',
                    label: '软件工程',
                  },
                  {
                    value: '网络安全',
                    label: '网络安全',
                  },
                  {
                    value: 'UI设计',
                    label: 'UI设计',
                  },

                ]}
              />
            </div>
            {/* 人员规模 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">人员规模</p>
              <Select
                defaultValue={peopleScale}
                style={{
                  width: 206,
                  height: 36,
                  marginTop: 11
                }}
                onChange={(e) => setPeopleScale(e)}
                options={[
                  {
                    value: '5-10人',
                    label: '5-10人',
                  },
                  {
                    value: '50-100人',
                    label: '50-100人',
                  },
                  {
                    value: '150-500人',
                    label: '150-500人',
                  },
                  {
                    value: '千人以上',
                    label: '千人以上',
                  },

                ]}
              />
            </div>
          </div>
          <Divider dashed />
          <h5>签约联系人</h5>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
          }}>

            {/* 联系人姓名 */}
            <div className="clientName clientINfoItem">
              <p className="require qtitle">联系人姓名</p>
              <Input value={name} onChange={(e) => {
                setName(e.target.value)
              }}
                placeholder='请输入'
              ></Input>
            </div>
            {/* 联系人职务 */}
            <div className="clientType clientINfoItem">
              <p className="require qtitle">联系人职务</p>
              <Input value={post} onChange={(e) => {
                setPost(e.target.value)
              }}
                placeholder='请输入'></Input>
            </div>
            {/* 联系人手机号 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">联系人手机号</p>
              <Select
                defaultValue="86"
                style={{
                  width: 73,
                  height: 36
                }}
              >
                <Select.Option value="86">+86</Select.Option>
                <Select.Option value="87">+87</Select.Option>
              </Select>
              <Input
                style={{
                  width: 127,
                  height: 36
                }}
                value={phone} onChange={(e) => {
                  setPhone(e.target.value)
                }}
                placeholder='请输入'></Input>
            </div>
            {/* 联系人邮箱 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">联系人邮箱</p>
              <Input value={email} onChange={(e) => {
                setEmail(e.target.value)
              }}
                placeholder='请输入'></Input>
            </div>
          </div>
          <Divider dashed />
          <h5>租期管理员</h5>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
          }}>

            {/* 管理员姓名 */}
            <div className="clientName clientINfoItem">
              <p className="require qtitle">管理员姓名</p>
              <Input value={adminname} onChange={(e) => {
                setAdminName(e.target.value)
              }}
                placeholder='请输入'
              ></Input>
            </div>
            {/* 管理员证件号 */}
            <div className="clientType clientINfoItem">
              <p className="require qtitle">管理员证件号</p>
              <Input value={adminIdcard} onChange={(e) => {
                setAdminIdcard(e.target.value)
              }}
                placeholder='请输入'></Input>
            </div>
            {/* 管理员手机号 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">联系人手机号</p>
              <Select
                defaultValue="86"
                style={{
                  width: 73,
                  height: 36
                }}
              >
                <Select.Option value="86">+86</Select.Option>
                <Select.Option value="87">+87</Select.Option>
              </Select>
              <Input
                style={{
                  width: 127,
                  height: 36
                }}
                value={adminphone} onChange={(e) => {
                  setAdminPhone(e.target.value)
                }}
                placeholder='请输入'></Input>
            </div>
            {/* 管理员邮箱 */}
            <div className="clientIndustry clientINfoItem">
              <p className="qtitle">联系人邮箱</p>
              <Input value={adminemail} onChange={(e) => {
                setAdminEmail(e.target.value)
              }}
                placeholder='请输入'></Input>
            </div>
          </div>

        </div>
        <div style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'center'
        }}>
          <Button style={{
            background: '#8479e3',
            color: '#fff',
            fontSize: 14,
            width: 120,
            height: 36
          }}
            onClick={() => {

              let item = {
                clientName,
                clientType,
                clientIndustry,
                peopleScale,
                name,
                post,
                phone,
                email,
                adminname,
                adminIdcard,
                adminphone,
                adminemail
              }
              console.log(item);
              addClient(item)
              getClientList().then((res) => {
                setClientName("")
                setClientType("")
                setClientIndustry("")
                setPeopleScale("")
                setName("")
                setPost("")
                setPhone("")
                setEmail("")
                setAdminName("")
                setAdminEmail("")
                setAdminIdcard("")
                setAdminPhone("")
                setClientData(res.data.data)
              })
              setIsnewOpen(false)
              location.reload()
            }}
          >保存</Button>
        </div>
      </Modal>
      {/* 批量导入 */}
      <Modal title="批量导入客户"
        open={isimportOpen}
        onCancel={() => setIsimportOpen(false)}
        footer={null}
        width={480}
      >
        <div className="qimportclient">
          <Divider />
          <p className="qtip" style={{
            color: "#9B9EA9 ",
            fontSize: 12
          }}>
            温馨提示：
            根据模板内的“填写须知”填写客户信息后，将模板Exce上传至此处即可批量导入！
          </p>
          <Button
            style={{
              width: 80,
              height: 30,
              background: '#8479E3',
              color: '#fff',
              marginTop: 20
            }}>下载模板</Button>
          <Divider />
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
            beforeUpload={beforeUpload}
            onChange={handleChange}
          >
            <div style={{
              width: "100%",
              height: 118,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}>
              {imageUrl ? (
                <img
                  src={imageUrl}
                  alt="avatar"
                  style={{
                    width: '100%',
                  }}
                />
              ) : (
                uploadButton
              )}
            </div>
          </Upload>
        </div>
      </Modal>
      {/* 客户详情 */}
      <div className="qclientDetailMask"
        style={showDetail ? { display: 'block' } : { display: 'none' }}
        onClick={(e) => {
          e.stopPropagation()
          setShowDetail(false)
        }}
      >
        <CloseCircleOutlined style={{
          position: 'absolute',
          right: '730px',
          top: '10px',
          zIndex: 100,
          fontSize: 30,
          color: '#fff'
        }} />
        <div className="qclientDetail" onClick={(e) => {
          e.stopPropagation()
        }}>
          <div className="qdetailHeader" onClick={() => {
            setClientNameipt(true)
          }}>
            <div className="qipt">
              <div>
                <input type="text"
                  disabled={clientNameipt}
                  style={clientNameipt ? {} : { borderBottom: '1px solid #A0A0A0' }}
                  value={clientDetail.clientName}
                  onClick={(e) => {
                    e.stopPropagation()
                  }}
                  onChange={(e) => {
                    let obj = clientDetail
                    // obj.clientName = e.target.value
                    setClientDetail({ ...obj, clientName: e.target.value })
                  }}
                  className='clientNameipt' />
                <FormOutlined style={{
                  fontSize: 18,
                  color: '#A0A0A0',
                  cursor: 'pointer',
                  marginLeft: 10
                }}
                  onClick={(e) => {
                    e.stopPropagation()
                    setClientNameipt(false)
                  }}
                /></div>
              <span className='clientId'>客户ID:{clientDetail.clientId}</span>
            </div>
            <div className="qdel" onClick={() => {
              delClient(clientDetail.id)
              setShowDetail(false)
              location.reload()
            }}>
              删除
            </div>
          </div>
          <div className="qdetailTabs">
            <ul>
              {tabitems.map((item) => {
                return <li
                  className='tabs-tab'
                  key={item.key}
                  style={currtab == item.key ? {
                    color: '#8C7EEF'
                  } : {}}
                  onClick={() => {
                    setCurrtab(item.key)
                    if (item.key == 2) {
                      getLeaseList().then(res => {
                        setLeaseData(res.data.data)
                      })
                    }
                  }}
                >{item.label}</li>
              })}
            </ul>
          </div>
          {/* 客户资料 */}
          {currtab == 1 &&
            <div className='clientData'>
              <div className="qheader">
                <div className="title">基本资料</div>
                <div className="editor" onClick={() => {
                  setClientType(clientDetail.clientType)
                  setClientIndustry(clientDetail.clientIndustry)
                  setPeopleScale(clientDetail.peopleScale)
                  setEditBasic(true)
                }}>编辑</div>
              </div>
              <div className="content">
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>客户类型</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.clientType}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>人员规模</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.peopleScale}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>行业</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.clientIndustry}</p>
                </div>

              </div>
              <Divider />
              <div className="qheader">
                <div className="title">签约联系人</div>
                <div className="editor">编辑</div>
              </div>
              <div className="content">
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>姓名</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.name}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>职务</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.post}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>手机号</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>+86{clientDetail.phone}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>邮箱</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>+86{clientDetail.email}</p>
                </div>
              </div>
              <Divider />
              <div className="qheader">
                <div className="title">租期管理员</div>
                <div className="editor">编辑</div>
              </div>
              <div className="content">
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF',
                    whiteSpace: 'nowrap'
                  }}>姓名</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.adminname}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF',
                    whiteSpace: 'nowrap'
                  }}>证件号</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.adminIdcard}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF',
                    whiteSpace: 'nowrap'
                  }}>邮箱</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.adminemail}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF',
                    whiteSpace: 'nowrap'
                  }}>手机号</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>+86{clientDetail.adminphone}</p>
                </div>
              </div>
              <Divider />
              <div className="qheader">
                <div className="title">发票信息</div>
                <div className="editor" onClick={() => {
                  setMod(true)
                }}>编辑</div>
              </div>
              <div className="content">
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>发票类型</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.clientType}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>纳税人识别号</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>91110 10000 00000 000</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>发票抬头</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>{clientDetail.clientName}</p>
                </div>
                <div>
                  <span style={{
                    fontSize: 12,
                    color: '#B2B5BF'
                  }}>手机号</span>
                  <p style={{
                    fontSize: 16,
                    color: '#000'
                  }}>+86{clientDetail.phone}</p>
                </div>
              </div>
            </div>
          }
          {/* 租约信息 */}
          {currtab == 2 &&
            <div className='leaseData'>
              <Table columns={leasecolumns} dataSource={leaseData} />
            </div>
          }
          {/* 租期信息 */}
          {currtab == 3 &&
            <>
              <div className='leaseData'>
                <div className="qleaseDataMenu">
                  <Button style={{
                    background: '#8479e3',
                    color: '#fff',
                    fontSize: 14,
                  }}
                    onClick={() => setIsXinzu(true)}
                  > <PlusOutlined />新租</Button>
                  <div className='changeZuqi' onClick={() => {
                    setIsZuqi(true)
                    getChangeZuqi().then(res => {
                      setChangeZuqiData(res.data.data)
                    })
                  }}>租期变动明细 <RightOutlined /></div>
                </div>
                <Table columns={zuqicolumns} dataSource={zuqiData} />
              </div>

              <Modal
                title="新租"
                open={isXinzu}
                onCancel={() => setIsXinzu(false)}
                footer={null}
              >
                <Divider />
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  <div className="clientName clientINfoItem">
                    <p className="require qtitle">所在楼宇</p>
                    <Select
                      style={{
                        width: 206,
                        height: 36,
                        marginTop: 11
                      }}
                      value={livebuild}
                      onChange={(e) => setLivebuild(e)}
                      options={[
                        {
                          value: '骏豪中央公园广场A座',
                          label: '骏豪中央公园广场A座',
                        },
                        {
                          value: '骏豪中央公园广场B座',
                          label: '骏豪中央公园广场B座',
                        },

                      ]}
                    />
                  </div>
                  {/* 所在楼层 */}
                  <div className="clientType clientINfoItem">
                    <p className="require qtitle">所在楼层</p>
                    <Select
                      style={{
                        width: 206,
                        height: 36,
                        marginTop: 11
                      }}
                      value={livefloor}
                      onChange={(e) => setLivefloor(e)}
                      options={[
                        {
                          value: '1楼',
                          label: '1楼',
                        },
                        {
                          value: '2楼',
                          label: '2楼',
                        },
                        {
                          value: '3楼',
                          label: '3楼',
                        },

                      ]}
                    />
                  </div>
                  {/* 所在空间 */}
                  <div className="clientIndustry clientINfoItem">
                    <p className="require qtitle">所在空间</p>
                    <Select
                      defaultValue={clientIndustry}
                      style={{
                        width: 206,
                        height: 36,
                        marginTop: 11
                      }}
                      value={space}
                      onChange={(e) => setSpace(e)}
                      options={[
                        {
                          value: '国贸一期A座',
                          label: '国贸一期A座',
                        },
                        {
                          value: '国贸一期B座',
                          lBbel: '国贸一期A座',
                        }

                      ]}
                    />
                  </div>
                  {/* 新建空间 */}
                  <div className="clientIndustry clientINfoItem"
                    style={{
                      alignSelf: 'flex-end',
                      marginLeft: 5
                    }}
                  >
                    没有所需的空间? 立即 <span style={{
                      color: '#8479e3',
                      fontSize: 12,
                      userSelect: 'none',
                      cursor: 'pointer'

                    }}>新建</span>
                  </div>
                  <Divider dashed />
                  {/* 租住开始日期 */}
                  <div className="clientIndustry clientINfoItem"
                    style={{
                      marginRight: 60
                    }}>
                    <p className="require qtitle">租住开始日期</p>
                    <DatePicker
                      // value={startDate}
                      format={{
                        format: 'YYYY-MM-DD',
                        type: 'mask',
                      }}
                      onChange={(e) => {
                        console.log(e);

                        let date = `${e.$y}-${(parseInt(e.$M)) + 1}-${e.$W}`
                        let d = startDate
                        d.startDate = date
                        setStartDate(d)
                        console.log(startDate);

                        // startDate = date


                        // console.log(date);

                        // console.log(e.$y);
                        // console.log(e.$M);
                        // console.log(e.$W);

                        // console.log(e);
                      }} style={{
                        marginTop: 20
                      }} />
                  </div>
                  {/* 租住结束日期 */}
                  <div className="clientIndustry clientINfoItem">
                    <p className="require qtitle">租住结束日期</p>
                    <DatePicker
                      onChange={(e) => {
                        let date = `${e.$y}-${(parseInt(e.$M)) + 1}-${e.$W}`
                        let d = startDate
                        d.endDate = date
                        setStartDate(d)

                      }}
                      style={{
                        marginTop: 20
                      }} />
                  </div>
                  <div style={{
                    width: '100%',
                    display: 'flex',
                    justifyContent: 'center',
                    marginTop: 20
                  }}>
                    <Button style={{
                      background: '#8479e3',
                      color: '#fff',
                      fontSize: 14,
                      width: 120,
                      height: 36
                    }}
                      onClick={() => {
                        setIsXinzu(false)

                        addZuqi({
                          build: livebuild,
                          floor: livefloor,
                          space: space,
                          ...startDate,
                        })
                        message.open({
                          type: 'success',
                          content: '添加成功'
                        })
                        getZuqiList().then(res => {
                          setZuqiData(res.data.data)
                        })
                      }}
                    >保存</Button>
                  </div>
                </div>
              </Modal>
            </>
          }
          {/* 账单 */}
          {currtab == 4 && <EmptyStatus></EmptyStatus>}
          {/* 保修 */}
          {currtab == 5 &&
            <div className='repairData'>
              <Table columns={repaircolumns} dataSource={repairData} />
            </div>
          }
          {/* 访客 */}
          {currtab == 6 && <EmptyStatus></EmptyStatus>}



        </div>
      </div>
      {/* 租期变动明细 */}
      <div className='qclientDetailMask'
        style={isZuqi ? { display: 'block' } : { display: 'none' }}
        onClick={(e) => {
          e.stopPropagation()
          setIsZuqi(false)
        }}
      >
        <CloseCircleOutlined style={{
          position: 'absolute',
          right: '730px',
          top: '10px',
          zIndex: 100,
          fontSize: 30,
          color: '#fff'
        }} />
        <div className='qclientDetail' onClick={(e) => {
          e.stopPropagation()
        }}>
          <div className="qdetailHeader" onClick={() => {
            setClientNameipt(true)
          }}
            style={{
              marginBottom: 21
            }}
          >
            <span style={{
              fontSize: 18,
              color: '#000'
            }}>租期变动明细</span>
          </div>
          <Table size='small' columns={changeZuqicolumns} dataSource={changeZuqiData} />
        </div>
      </div>
      {/* 编辑基本资料 */}
      <Modal
        title="编辑基础资料"
        open={editBasic}
        onCancel={() => setEditBasic(false)}
        footer={null}
      >
        <Divider />
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
        }}>
          {/* 客户类型 */}
          <div className="clientType clientINfoItem"
            style={{
              marginRight: 10
            }}>
            <p className="require qtitle">客户类型</p>
            <Select
              defaultValue={clientDetail.clientType}
              style={{
                width: 206,
                height: 36,
                marginTop: 11
              }}
              value={clientDetail.clientType}
              onChange={(e) => {
                let obj = clientDetail
                obj.clientType = e
                setClientDetail({ ...obj })
                console.log(clientDetail);

              }}
              options={[
                {
                  value: '企业',
                  label: '企业',
                },
                {
                  value: '个人',
                  label: '个人',
                },

              ]}
            />
          </div>
          {/* 行业 */}
          <div className="clientType clientINfoItem">
            <p className="require qtitle">行业</p>
            <Select
              defaultValue={clientDetail.clientIndustry}
              style={{
                width: 206,
                height: 36,
                marginTop: 11
              }}
              value={clientDetail.clientIndustry}
              onChange={(e) => {
                let obj = clientDetail
                obj.clientIndustry = e
                setClientDetail({ ...obj })
                console.log(clientDetail);
              }}
              options={[
                {
                  value: '软件工程',
                  label: '软件工程',
                },
                {
                  value: '物联网',
                  label: '物联网',
                },
                {
                  value: '  保安',
                  label: '  保安',
                },

              ]}
            />
          </div>
          {/* 人员规模 */}
          <div className="clientType clientINfoItem">
            <p className="require qtitle">人员规模</p>
            <Select
              defaultValue={clientDetail.peopleScale}
              style={{
                width: 206,
                height: 36,
                marginTop: 11
              }}
              value={clientDetail.peopleScale}
              onChange={(e) => {
                let obj = clientDetail
                obj.peopleScale = e
                setClientDetail({ ...obj })
                console.log(clientDetail);
              }}
              options={[
                {
                  value: '5-10人',
                  label: '5-10人',
                },
                {
                  value: '50-100人',
                  label: '50-100人',
                },
                {
                  value: '150-500人',
                  label: '150-500人',
                },
                {
                  value: '千人以上',
                  label: '千人以上',
                },
              ]}
            />
          </div>

        </div>
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          marginTop: 20
        }}>
          <Button style={{
            background: '#8479e3',
            color: '#fff',
            fontSize: 14,
            width: 120,
            height: 36
          }}
            onClick={() => {
              console.log(clientDetail);
              changeBasic({
                id: clientDetail.id,
                clientType: clientDetail.clientType,
                clientIndustry: clientDetail.clientIndustry,
                peopleScale: clientDetail.peopleScale
              })
            }}
          >保存</Button>
        </div>
      </Modal>
      {/* 编辑 */}
      <Modal centered={true} footer={null} width={520} open={mod} onCancel={() => {
        setMod(false)
      }}>
        <div className='w-mod-clien-box'>
          <p className='w-mod-clien-title'>编辑发票信息</p>
          <div className='w-mod-clien-center'>
            <div className='w-mod-clien-selector'>
              <p>*</p>
              <div>发票类型</div>
            </div>
            <Select
              className='w-mod-clien-select'
              defaultValue={sel}
              onChange={(e) => {
                setSel(e)
              }}
            >
              <Select.Option value="企业">企业</Select.Option>
              <Select.Option value="个人">个人</Select.Option>
            </Select>
            <div className={sel == '企业' ? 'w-mod-enterprise' : 'w-dis-none'}>
              <div className='w-mod-select-dis'>
                <div className='w-mod-select-Inp-box'>
                  <p>发票抬头</p>
                  <Input value={invoice} onChange={(e) => {
                    setInvoice(e.target.value)
                  }}></Input>
                </div>
                <div className='w-mod-select-Inp-box'>
                  <p>纳税人识别号</p>
                  <Input value={taxation} onChange={(e) => {
                    setTaxation(e.target.value)
                  }}></Input>
                </div>
              </div>

              <div className='w-mod-select-dis'>
                <div className='w-mod-select-Inp-box'>
                  <p>单位地址</p>
                  <Input value={unit} onChange={(e) => {
                    setUnit(e.target.value)
                  }}></Input>
                </div>
                <div className='w-mod-select-Inp-box'>
                  <p>电话号码</p>
                  <Input value={userPhone} onChange={(e) => {
                    setUserPhone(e.target.value)
                  }}></Input>
                </div>
              </div>

              <div className='w-mod-select-dis'>
                <div className='w-mod-select-Inp-box'>
                  <p>开户行</p>
                  <Input value={bank} onChange={(e) => {
                    setBank(e.target.value)
                  }}></Input>
                </div>
                <div className='w-mod-select-Inp-box'>
                  <p>银行账户</p>
                  <Input value={bankCard} onChange={(e) => {
                    setBankCard(e.target.value)
                  }}></Input>
                </div>
              </div>
            </div>
            <div className={sel == '个人' ? 'w-mod-enterprise' : 'w-dis-none'}>
              <div className='w-mod-all-useName'>
                <p>发票抬头</p>
                <Input value={useinvoice} onChange={(e) => {
                  setUseInvoice(e.target.value)
                }}></Input>
              </div>
            </div>
            <div className='w-mod-but-Price'>
              <Button onClick={() => {
                if (sel == '个人') {
                  upeUser({ id: useId, name: useinvoice }).then(res => {
                    setMod(false)
                    message.open({
                      type: 'success',
                      content: '修改成功',
                    });
                    getClientList().then((res) => {
                      console.log(res);
                      setClientData(res.data.data)
                    })
                  })
                } else {
                  updateUser({ id: useId, clientType: sel, clientName: invoice, liveBuild: unit, phone: userPhone }).then(() => {
                    setMod(false)
                    message.open({
                      type: 'success',
                      content: '修改成功',
                    });
                    getClientList().then((res) => {
                      console.log(res);
                      setClientData(res.data.data)
                    })
                  })
                }
              }}>
                提交
              </Button>

            </div>

          </div>
        </div>
      </Modal>
    </div >
  )
}
